<?php
$title = '登录';
$this->headTitle($title);
?>
<style>

    .background-box {
        border-radius: 15px;
        width: 100%;
        height: 500px;
        background: url(<?php echo $this->basePath() . "/img/bg.jpg";?>) no-repeat center top;
        background-size: 100%;
    }

    .login-box {
        border-style: solid;
        border-width: 1px;
        border-color: rgba(0, 0, 0, 0.35);
        background-color: rgba(255, 255, 255, 0.75);
        border-radius: 15px;
        width: 65%;
        /*height: 300px*/
    }

</style>

<div class="container-fluid">
    <div class="col-xs-12 col-md-12" style="height: 5%;"></div>
    <div class="col-xs-11 col-md-11 background-box">
        <div class="col-xs-12 col-md-12" style="height: 25%;"></div>
        <div class="col-xs-offset-2 col-xs-8 col-md-offset-7 col-md-6">
            <div class="col-xs-8 col-md-6 login-box">
                <h3 style="text-align: center">登 录</h3>
                <form class="form-horizontal">
                    <div class="input-group">
                        <span class="input-group-addon"> <span class="glyphicon glyphicon-user"></span> </span>
                        <input type="text" class="form-control input-lg" placeholder="职工号" id="ksbh">
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon"> <span class="glyphicon glyphicon-lock"></span> </span>
                        <input type="password" class="form-control input-lg" placeholder="密码" id="password">
                    </div>
                    <br>
                    <div class="form-group">
                        <div class="col-sm-7">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-list-alt"></span>
                                </span>
                                <input type="captcha" class="form-control input-lg" placeholder="验证码" id="captcha">
                            </div>
                        </div>
                        <div class="col-sm-5">
                            <img src="#" id="captchaShow" width="100%" onclick="getCaptcha()">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-4 col-sm-2">
                            <button type="button" class="btn btn-primary" onclick="login(this)">登录</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="/js/utils/base64.min.js"></script>
<script type="text/javascript">

    /**
     * 初始化/刷新验证码
     */
    function getCaptcha() {
        $.ajax({
            url: "/application/index/updateCaptcha",
            type: "GET",
            success: result => {
                result = JSON.parse(result);
                console.log(result);
                $('#captchaShow').attr("src", result.imgSrc);
            },
            fail: err => console.error(err)
        })
    }

    /**
     * 发送登陆表单验证
     */
    function login() {

        let ksbh = $('#ksbh').val();
        let password = $('#password').val();
        password = Base64.encode(password);
        let captcha = $('#captcha').val();

        // 验证请求发送
        $.ajax({
            url: "/application/index/tryLogin",
            type: "POST",
            data: {"data": {ksbh, password, captcha}},
            success: result => {
                result = JSON.parse(result);
                if (result.code != 1) { // 登陆失败
                    getCaptcha(); // 验证码刷新
                    alert(result.data.msg);
                } else if (result.code == 1) {                // 登陆成功
                    window.location.href = "/system/article/index";
                }
            }
        })
    }


    // 初始化加载验证码
    getCaptcha();

</script>
